import Footer from "./Component/text1/Footer";
import Header from "./Component/text2/Header";
import List from "./Component/text4/List";
import {Component} from "react";
export default class App extends Component{
  constructor(props) {
    super(props);
    this.state ={
      todos:[
        {id:1,value:"起床",action:true},
        {id:2,value:"睡觉",action:true},
        {id:3,value:"打核酸",action:true},
        {id:4,value:"干饭",action:true},
      ]
    }
    this.DelAllTodos = this.DelAllTodos.bind(this);
    this.updateTodo = this.updateTodo.bind(this);
    this.Checkalltodo = this.Checkalltodo.bind(this);
    this.addtodos = this.addtodos.bind(this);
    this.delTodo = this.delTodo.bind(this)
  }

  DelAllTodos =()=> {
    const {todos} = this.state
    const newTodos = todos.filter((todoObject)=>{
      return todoObject.action !== true
    })
    this.setState({todos: newTodos})
  }

  Checkalltodo = (action) => {
    const {todos} = this.state
    const newTods = todos.map((todoObject) =>{
      return{...todoObject,action:action}
    })
    this.setState({todos: newTods})
  }

  addtodos = (todoObj) =>{
    const {todos} = this.state
    const newTodos = [todoObj,...todos]
    this.setState({todos: newTodos})
  }

  updateTodo = (id,action) =>{
    const {todos} = this.state
    const newTodos = todos.map((todoObject) => {
      if (todoObject.id === id){
        return{...todoObject,action}
      }
      else
      {
        return todoObject
      }
    })
    this.setState({todos:newTodos})
  }

  delTodo = (id) => {
    const {todos} = this.state
    const newTodos = todos.filter((todoObject) => {
      return todoObject.id !== id
    })
    this.setState({todos: newTodos})
  }

  render() {
    const {todos} = this.state
    return (
        <div id="da_div">
            <div className="container">
              <div className="container tables">
                  <Header addtodos={this.addtodos} />
                  <List todos={todos} updateTodo={this.updateTodo} delTodo={this.delTodo} />
                  <Footer todos={todos} Checkalltodo={this.Checkalltodo} DelAllTodos={this.DelAllTodos} />
              </div>
            </div>
        </div>
    );
  }
}

